<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHeader">

    <link rel="stylesheet" th:href="@{/css/beeui.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/main.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/index.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/beehive/js/main.js}"></script>
    <script th:src="@{/beehive/js/index.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>


</head>
<body>

<!-- 首页公共头部 -->
<header class="clear" th:fragment="header">
    <img th:src="@{/img/logo_lg.png}">
    <div class="logo">
        <h1>Beehive</h1>
        <br/>
        <p>蜂巢书屋,享你所想</p>
    </div>
    <div class="search left">
<!--        改造，禁止用户非法输入（空值）-->
<!--        <form th:action="@{/search}" method="get">-->
<!--            <input type="text"  lay-verify="required" name="keyword" placeholder="请输入书名或作者或出版社">-->
<!--            <input type="submit" value="搜索">-->
<!--        </form>-->
        <form>
            <input type="text" id="keyword" name="keyword" placeholder="请输入书名或作者或出版社">
            <input type="button" onclick="toSearch()" value="搜索">
        </form>
        <script>
            // 必须是外部引用layer，否则提示not defined！另外因引用该fragment的页面需要加入对应的layui.js，layui.css
            let layer;
            layui.use('layer', function () {
                layer = layui.layer;
            });
            function toSearch() {
                let keyword = $("#keyword").val();
                if (keyword.length !== 0) {
                    console.log("地址是：/search?keyword=" + keyword);
                    location.href = "/search?keyword=" + keyword;
                } else {
                    layer.open({title: '提示', icon: 0, time: 1200, shadeClose: true, content: '禁止非法输入！', anim: 6});
                }
            }
        </script>
    </div>

    <div th:switch="${session.loginUser} == null" class="reg">
        <div th:case="true" style="float: left">
            <a  th:href="@{/login.html}">登录</a>
            <span>|</span>
            <a  th:href="@{/register.html}">注册</a>
        </div>
        <div th:case="false" style="float: left">
            <a th:href="@{/user/self}">[[${session.loginUser.username}]]</a>
            <span class="split">|</span>
            <a th:href="@{/user/logout}">退出登录</a>
        </div>
        <span>|</span>
        <a th:href="@{/feedback.html}">意见反馈</a>
    </div>
</header>


<!-- 导航菜单条 -->
<nav th:fragment="commonNav" class="clear">
    <ul class="nav_1 clear">
        <div class="active"></div>
        <li><a th:href="@{/index.html}">首页</a></li>
        <li th:each="item : ${itemList}"><a th:href="@{/theme/} + ${item.id}">[[${item.name}]]</a></li>
    </ul>
</nav>

<!-- 底部栏 -->
<footer th:fragment="commonFooter" class="clear">
    <p>Beehive是电子书分享平台，如对本站有意见或建议请<a th:href="@{/feedback.html}">留言</a></p>
    <p>本站所有信息仅用于学习交流，不作商业用途 Powered by <a href="http://www.newson.ltd">www.newson.ltd</a></p>

</footer>


<!-- 后台测试用 -->
<div th:fragment="adminTop" class="admin-top">
    <ul class="layui-nav beeui-a" style="background-color: #ffffff">
        <li class="layui-nav-item">
            <span id="brand" style="font-size: 18px; color: #1890ff">Beehive Dashboard</span>
        </li>
        <li class="layui-nav-item">
            <a href="#" style="color: #000000A6">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item beeui-nav-item-right">
            <a href="" style="color: #000000A6"><img src="//t.cn/RCzsdCq" class="layui-nav-img">haha</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" style="color: #000000A6">修改信息</a></dd>
                <dd><a href="javascript:;" style="color: #000000A6">安全管理</a></dd>
                <dd><a href="/admin/logout" style="color: #000000A6">退了</a></dd>
            </dl>
        </li>
        <!-- elementUI -->
        <li class="layui-nav-item beeui-nav-item-right">
            <el-tooltip class="item" effect="dark" content="点击跳转到首页" placement="left">
                <a th:href="@{/test}" type="_blank">
                    <i class="layui-icon layui-icon-link" style="color: #000000A6"></i>
                </a>
            </el-tooltip>
        </li>
    </ul>
</div>




</body>
</html>